<template>
    <el-table class="inputTable" :data="props.item.paramDataModel" :border="true" style="width: 100%;">
        <el-table-column prop="params" label="参数">
            <template #default="scope">
                <div class="fx fw paramsDiv bb pl30">
                    
                    <template :key="prIndex" v-for="(prItem, prIndex) in scope.row.params">
                        <el-form :model="prItem" ref="prItemRef" label-width="100px" class="demo-dynamic">
                            <!-- 参数表单值是value的情况开始 -->
                            <div v-show="prItem.type == 0">
                                <!-- 下拉选择的参数开始 -->
                                <template v-if='prItem.key == "dof"||prItem.key == "type"||prItem.key == "gravity"'>
                                    <el-form-item :label="prItem.name"  :rules="getRules(prItem)" :label-width="prItem.labelWidth" prop="val"
                                        class="bb mb20 w329 ">
                                        <div class="info" >{{prItem.description}}</div>
                                        <el-select v-model="prItem.val" class="m-2" placeholder="请选择" size="large" style="width: 209px;"
                                            >
                                            <template v-for="(dItem, dIndex) in getOptions(prItem.key)" :key="dIndex">
                                                <el-option :label="dItem" :value="dItem" />
                                            </template>
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <!-- 下拉选择的参数结束 -->
                                <template v-else>
                                    <!-- 区分参数类型是字符串还是数字，0->数字，1->字符串 -->
                                    <el-form-item prop="val" :label="prItem.name" :rules="getRules(prItem)" :label-width="prItem.labelWidth" class="bb mb20 w329 ">
                                    <div class="info" >{{prItem.description}}</div>
                                        <el-input v-input="{ field: prItem }"  :maxlength="getMaxLength(prItem)" v-model="prItem.val" type="text"
                                            @input="handleInputChange(prItem)" autocomplete="off" />
                                    </el-form-item>
                                </template>
                            </div>
                            <!-- 参数表单值是value的情况结束 -->
                            <!-- List结构表单开始 -->
                            <div v-show="prItem.type == 1" class="r">
                                <ListFrame ref="listFrame" :prItem="prItem"></ListFrame>
                            </div>
                            <!-- List结构表单结束 -->
                            <!-- Map结构表单开始 -->
                            <div v-show="prItem.type == 2" class="r">
                                <MapFrame ref="mapFrame" :prItem="prItem"></MapFrame>
                            </div>
                            <!-- Map结构表单结束 -->
                        </el-form>
                    </template>
                </div>
            </template>

        </el-table-column>
        <el-table-column v-if="props.item.type == 3" label="操作" width="150" fixed="right">
            <template #default="scope">
                <el-button type="danger" @click="handleDeleteParams(scope.$index, scope.row, item.appParams)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
</template>
<style>
.table .el-form-item__content {
    margin-left: 0 !important;
}

.dropdowntb {
    z-index: 100000;
}
.inputTable .el-form{margin-top: 10px;}
</style>
<script setup>
import { ref, defineExpose ,defineProps } from 'vue'
import plusBtn from '@/components/plusBtn/Index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ListFrame from './ListFrame.vue'
import MapFrame from './MapFrame.vue'


//校验数字范围,必须大于0
function numValidatorNoZero(rule, value, callback){
    if(value===''||value===undefined){
        callback(new Error(rule.name + '不能为空'))
    }
    if (value.toLowerCase().search('e') != -1) {
        value = getFullNum(value)
    }
    if(value == 0){
        callback(new Error(rule.name + '的值不能为0'))
    }else if (value > rule.dataMaxLength) {
        callback(new Error(rule.name + '的值不能大于' + rule.dataMaxLength))
    } else {
        callback()
    }
}
//获取当前表单最多可输入字数
function getMaxLength(item){
    if(item.dataType==0){
        return 32
    }else{
        return item.dataMaxLength
    }
}
//校验数字范围
function numValidatorFun(rule, value, callback) {
    if(value===''||value===undefined){
        callback(new Error(rule.name + '不能为空'))
    }
    if (value.toLowerCase().search('e') != -1) {
        value = getFullNum(value)
    }
    if (value > rule.dataMaxLength) {
        callback(new Error(rule.name + '的值不能大于' + rule.dataMaxLength))
    } else {
        callback()
    }
    

}
//字符串检验
function strValidatorFun(rule, value, callback){
    if(value===''||value===undefined){
        callback(new Error(rule.name + '不能为空'))
    }
}
//获取当前表单的验证规则
function getRules(item){
    let validatorFun = null;
    if(item.dataType==0){
       if(item.zero==1){
        validatorFun = numValidatorNoZero
       }else{
        validatorFun = numValidatorFun
       }
    }else{
        validatorFun = strValidatorFun
    }
    return [{required:true, validator: validatorFun, trigger: 'blur' ,name:item.name ,dataMaxLength: item.dataMaxLength}]
}
// 把科学计数法转为数字
function getFullNum(num) {
    //处理非数字
    if (isNaN(num)) { return num };
    //处理不需要转换的数字
    var str = '' + num;
    if (!/e/i.test(str)) { return num; };
    //先获取到精确的小数位
    var fixed = ('' + num).match(/\d+$/)[0];
    //拿到保留指定的小数
    return new Number(num).toFixed(fixed);
}


/**
 * 根据参数的key获取下拉框选项
 * @param key 参数的key
 *  */
 function getOptions(key){
    let options = []
    if(key=='dof'){
        options = [
        'U1',
        'U2',
        'U3',
        'UR1',
        'UR2',
        'UR3']
    }else if(key=='type'){
        options = [
            'solid',
            'fluid'
        ]
    }else if(key=='gravity'){
        options = ['x', '-x',' y', '-y', 'z', '-z']
    }
    return options
}
const props = defineProps({
    item: {
        type: Object,
        default: {},
    },
    tabIndex: {
        type: Number,
        default: 0,
    }
})

/* for(let i=0;i<props.item.paramDataModel.params.length;i++){
    //const 'listRef'
} */



const emits = defineEmits(['modifyParentData','inputTaskName']);
//打开表单的下拉框
function openFrame(item) {

    props.item.paramDataModel.map((mItem, pIndex) => {
        mItem.params.map((pItem, pIndex) => {
            if (pItem.frameStatus) {
                pItem.frameStatus = false
            }
        })
    })
    item.frameStatus = true
}
function preventFun() { }
//添加数组参数
function handleAddListParam(item) {
    item.dataModelList.push(undefined)
}
//删除map格式数据项
function deleteMapData(list, index) {
    list.splice(index, 1)
}
//监听表单数据变化
function handleInputChange(pItem) {
    if (props.item.groupKey == 'JOB' && pItem.key == 'name') {
        emits('inputTaskName', { taskName: pItem.val })
    }
}
//删除行数
function handleDeleteParams(index, row, params) {
    ElMessageBox.confirm(
        '你是否确定删除本条数据',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            props.item.paramDataModel.splice(index, 1)
        })
        .catch(() => {

        })

}
//返回给父组件的验证状态
let valid = true
//表单获取
const prItemRef = ref(null)
const listRef = ref(null)
//表单验证回调
function validator(isValid, invalidFields) {
    // 认证不通过
    if (!isValid) {
        valid = false
    }
}
const listFrame = ref(null)//数组参数索引
const mapFrame = ref(null)//集合参数索引
//表单认证
function checkForm() {
    //获取子组件的验证状态
    if (listFrame.value && Array.isArray(listFrame.value) && listFrame.value.length > 0) {
        listFrame.value.map((item,index)=>{
            item.checkForm()
        })
	}
    if (mapFrame.value && Array.isArray(mapFrame.value) && mapFrame.value.length > 0) {
        mapFrame.value.map((item,index)=>{
            item.checkForm()
        })
	}
    if (Array.isArray(prItemRef.value)) {
        prItemRef.value.map((item, index) => {
            item.validate(validator)
        })
    } else if(prItemRef.value) {
        prItemRef.value.validate(validator)
    }
    return { valid, tabIndex: props.tabIndex }
}
defineExpose({ checkForm })



</script>